<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>河南青少年机器人竞赛</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
.security-code{position: absolute;padding: 7px 12px;right:2px;}
.banner{position: relative;width: 100%; height: 150px;background: #32b1ff;}
.banner img{position: absolute;bottom:0;right: 0;width: 100px;height: 100px;}
.banner h3{position: absolute;top:20px;padding-left: 20px;color: #fff;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">修改密码</h1>
		</header>

		<div class="mui-content">
			<div class="banner">
				<h3>河南青少年机器人竞赛</h3>
				<img src="images/robot.png" alt="">
			</div>
			<form id="change-pwd-form">
				<div class="mui-card">
					<div class="mui-input-row">
						<label>手机号:</label>
						<input name="phone" type="text" class="mui-input-clear" placeholder="请输入手机号">
					</div>
					<!-- <div class="mui-input-row">
						<label>验证码:</label>
						<input name="verfiCode" type="text" class="mui-input-clear" placeholder="请输入验证码">
						<button class="security-code">获取验证码</button>
					</div> -->
					<div class="mui-input-row">
						<label>旧密码:</label>
						<input name="passwd" type="text" class="mui-input-clear" placeholder="请输入旧密码">
					</div>
					<div class="mui-input-row">
						<label>新密码:</label>
						<input name="newPass" type="text" class="mui-input-clear" placeholder="请输入新密码">
					</div>
				</div>
			</form>
			<div class="mui-content-padded">
				<button class="mui-btn mui-btn-block mui-btn-primary change-pwd" style="padding:10px 0;">提交</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/common.js"></script>
		<script>
			var count = 60; //间隔函数，1秒执行
			var InterValObj1; //timer变量，控制时间
			var curCount1;//当前剩余秒数
			mui(".mui-content").on('tap','.security-code',function(){
				$(".security-code").text("重新发送");
				curCount1 = count;
				// var phone = $.trim($('#phone1').val());
				// if (!phoneReg.test(phone)) {
				// 	alert(" 请输入有效的手机号码");
				// 	return false;
				// }
				//设置button效果，开始计时
				$(".security-code").attr("disabled", "true");
				$(".security-code").text( + curCount1 + "秒再获取");
				InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
				//向后台发送处理数据
			});
			function SetRemainTime1() {
				if (curCount1 == 0) {
					window.clearInterval(InterValObj1);//停止计时器
					$(".security-code").removeAttr("disabled");//启用按钮
					$(".security-code").text("重新发送");
				}
				else {
					curCount1--;
					$(".security-code").text( + curCount1 + "秒再获取");
				}
			}
			mui(".mui-content").on('tap','.change-pwd',function(){
				JSON.stringify(getFormData($('#change-pwd-form')));
				console.log(JSON.stringify(getFormData($('#change-pwd-form'))));
				$.ajax({
					type: "put",
					url: "../user/modifyPassword",
					data: JSON.stringify(getFormData($('#change-pwd-form'))),
					dataType: "json",
					contentType: 'application/json',
					success: function(data){
						console.log(data);
						if (data.success == 1) {
							mui.toast('修改成功', {duration: '2000', type: 'div'});
						} else {
							mui.toast(data.message, {duration: '2000', type: 'div'});
						}
						
					},
					error:function(){
						mui.toast('系统错误',{ duration:'2000', type:'div' });
					}
				});
			});
			$("#back").click(function(){
				mui.openWindow({
					url:'index.html'
				});
			})
		</script>
	</body>

</html>